<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@include file="../common/common.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
	<title>深入浅出Hadoop</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Bootstrap core CSS -->
	<link href="${request.getContext}/third/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
	<!-- Custom styles for this template -->
	<link href="${request.getContext}/third/bootstrap-3.3.7-dist/css/navbar.css" rel="stylesheet">
</head>
<body>

	<div class="container">

		<jsp:include page="../top.jsp"/>

		<!-- Main component for a primary marketing message or call to action -->
		<div class="jumbotron">
			<form class="form-inline" role="form" action="/hadoop/search" method="get">
				<input class="form-control" type="search" id="query" name="text" />
				<button type="submit" class="btn btn-default">Search</button>
			</form>

			<h2 style="width: auto">${searchData}</h2>
		</div>

	</div>
	<!-- /container -->
</body>
</html>
<link href="${request.getContext}/third/css/jquery-ui.css" rel="stylesheet">
<script src="${request.getContext}/third/js/jquery.min.js"></script>
<script src="${request.getContext}/third/js/jquery-ui.js"></script>
<script src="${request.getContext}/third/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#query").autocomplete({
            source : function(request, response){
                $.ajax({
                    url : "/hadoop/suggest",
                    dataType : "json",
                    data : {
                        query : $("#query").val()
                    },
                    success : function(data){
                        var box = $('.jumbotron h2').html('');
                        if(data.length > 0){
                            for(var i =0;i < data.length;i++){
                                $('.jumbotron h2').append($('<p>').html(data[i]))
                            }
                            box[0].className = 'ui-selectmenu-button ui-button ui-widget';
						}else{
                            box.removeAttr('class');
						}
                    }
                });
            },
            minLength:1,
        });
    });

</script>
